<template>
  <div class="add-order-container">
    <div class="add-order-container-center-top">
      <div class="add-order-container-header">
        <title-view :title="`${reformState == 0 ? '创建' : '修改'}${showtitle === '变更' ? '增减项' : showtitle}售后单`" />
        <el-button type="info" color="#F2F3F5" @click="handleGoto">返回上一页</el-button>
      </div>
      <div class="add-order-container-top-content">
        <div class="order_body--title" style="margin-bottom: 20px">
          <div class="order_body--titleleft">基础信息</div>
          <div class="order_body--titleright">(内部可见)</div>
        </div>
        <div>
          <el-form :model="formdata" :rules="rules" ref="ruleFormRef" label-position="left">
            <el-row>
              <el-col :span="12">
                <div class="form-item-container">
                  <el-form-item
                      :label="`${showtitle === '变更' ? '增减项' : showtitle}分类`"
                      class="item-container-elinput"
                      prop="rectificationValue"
                  >
                    <el-cascader
                        v-model="formdata.rectificationValue"
                        :options="rectificationOptions"
                        :props="treeRectification"
                        clearable
                        @change="handleRectification"
                    ></el-cascader>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="form-item-right">
                  <el-form-item label="是否业主可见" prop="isVisible">
                    <el-radio-group v-model.number="formdata.isVisible" :disabled="formdata.isOwnerConfirmationRequired == 1">
                      <el-radio :value="1" size="large">是</el-radio>
                      <el-radio :value="0" size="large">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <div class="form-item-container">
                  <el-form-item :label="`${showtitle === '变更' ? '增减项' : showtitle}模板`" prop="packageId">
                    <el-select v-model="formdata.packageId" placeholder="请选择" style="width: 240px">
                      <el-option
                          v-for="item in templateOptions"
                          :key="item.packageId"
                          :label="item.packageName"
                          :value="item.packageId"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="form-item-right">
                  <el-form-item label="是否需要业主确认" prop="isOwnerConfirmationRequired" v-if="showisOwner">
                    <el-radio-group
                        v-model.number="formdata.isOwnerConfirmationRequired"
                        :disabled="isNeedsure"
                        @click="isNeedsureclick"
                    >
                      <el-radio :value="1" size="large">是</el-radio>
                      <el-radio :value="0" size="large">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <div class="form-item-container activelable">
              <el-form-item label="问题描述" class="item_table_active input-container" prop="reformDesc">
                <el-input
                    v-model="formdata.reformDesc"
                    type="textarea"
                    placeholder="请输入问题描述"
                    :maxlength="300"
                    spellcheck="false"
                    show-word-limit
                />
              </el-form-item>
              <a href="javascript:;" @click="handleStandard()">申请标准</a>
            </div>

            <div class="form-item-container" style="padding-left: 8px">
              <el-form-item label="解决方案" class="input-container item_table_active">
                <el-input
                    v-model="formdata.solution"
                    type="textarea"
                    placeholder="请输入解决方案"
                    :maxlength="300"
                    spellcheck="false"
                    show-word-limit
                />
              </el-form-item>
            </div>
          </el-form>

          <div style="padding-left: 8px">
            <el-form label-position="left">
              <div class="form-item-container">
                <el-form-item label="上传图片" class="item_image_active">
                  <image-video-upload
                      :file-list="picData"
                      tip="只能上传jpg/png，且不超过10M,最大支持上传9张"
                      accept=".jpg,.png"
                      multiple
                      :max-size="10"
                      :max-length="9"
                      @upload-success="uploadImage"
                      @upload-remove="uploadImageRemove"
                  />
                </el-form-item>
              </div>

              <div class="form-item-container">
                <el-form-item label="上传视频" class="item_video_active">
                  <image-video-upload
                      :file-list="videoData"
                      fileType="video"
                      isLimitDuration
                      accept=".avi,.mov,.mp4,.wmv"
                      tip="只能上传avi/mov/mp4/wmv文件格式，单个不超过200M限制时长不超过60s，最大支持上传6个"
                      multiple
                      :max-size="200"
                      :max-length="6"
                      @upload-success="uploadVideo"
                      @upload-remove="uploadVideoRemove"
                  />
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>

      <div class="add-order-container-white" v-if="formdata.isVisible == 1"></div>

      <div class="add-order-container-center-bottom" v-if="formdata.isVisible == 1">
        <div class="order_container_title">
          <div class="order_body--title" style="margin-bottom: 20px">
            <div class="order_body--titleleft">基础信息</div>
            <div class="order_body--titleright">(业主可见)</div>
          </div>
        </div>

        <div style="margin-left: 8px">
          <el-form :model="formdata" label-position="left" :rules="rulestwo" ref="ruleFormReftwo">
            <div class="form-item-container">
              <el-form-item label="预计完成日期" style="margin-left: -30px">
                <el-date-picker
                    v-model="formdata.expectedCompletionTime"
                    type="date"
                    placeholder="请选择日期"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                    :disabled-date="disabledDate"
                />
                <span
                    style="margin-left: 16px; font-size: 14px; color: #007dff; cursor: pointer"
                    @click="handleSystemCalculation"
                >
                  <el-tooltip content="预计完成日期=发起/编辑日期+模版的任务工期" placement="bottom" effect="light">
                    系统计算
                  </el-tooltip>
                </span>
              </el-form-item>
            </div>

            <div class="form-item-container" style="margin-left: 40px">
              <el-form-item label="预计延期天数" label-position="right">
                <div class="form_expectedDelayDays">
                  <div class="form_expectedDelayDays_lr" @click="subtractexpectedDelayDays">
                    <img class="tab-item_icon" :src="require('@/assets/images/image/subtract.png')" />
                  </div>
                  <div class="form_expectedDelayDays_content">
                    <el-input
                        v-model="formdata.expectedDelayDays"
                        @input="validateInput"
                        @keypress="disableEnterKey"
                        @blur="setDefaultDelayDays"
                        style="
                        width: 72px;
                        margin: 0 4px 0 4px;
                        height: 34px;
                        box-shadow: 0px 0px 0px 2px #d9e1ff;
                        border-radius: 3px 3px 3px 3px;
                      "
                    />
                  </div>
                  <div class="form_expectedDelayDays_lr" @click="addexpectedDelayDays">
                    <img class="tab-item_icon" :src="require('@/assets/images/image/add.png')" />
                  </div>
                </div>
              </el-form-item>
            </div>

            <div class="form-item-container activelable">
              <el-form-item
                  :label="`变更内容`"
                  class="item_table_active input-container"
                  prop="ownerVisibleContent"
                  style="margin-left: -10px"
              >
                <el-input
                    v-model="formdata.ownerVisibleContent"
                    type="textarea"
                    :placeholder="`请输入变更内容`"
                    :maxlength="300"
                    spellcheck="false"
                    show-word-limit
                />
              </el-form-item>
            </div>

            <div class="form-item-container">
              <el-form-item label="上传图片" class="item_image_active">
                <image-video-upload
                    :file-list="ownerpicData"
                    tip="只能上传jpg/png，且不超过10M,最大支持上传9张"
                    accept=".jpg,.png"
                    multiple
                    :max-size="10"
                    :max-length="9"
                    @upload-success="owneruploadImage"
                    @upload-remove="owneruploadImageRemove"
                />
              </el-form-item>
            </div>

            <div class="form-item-container">
              <el-form-item label="上传视频" class="item_video_active">
                <image-video-upload
                    :file-list="ownervideoData"
                    fileType="video"
                    isLimitDuration
                    accept=".avi,.mov,.mp4,.wmv"
                    tip="只能上传avi/mov/mp4/wmv文件格式，单个不超过200M限制时长不超过60s，最大支持上传6个"
                    multiple
                    :max-size="200"
                    :max-length="6"
                    @upload-success="owneruploadVideo"
                    @upload-remove="owneruploadVideoRemove"
                />
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <div class="foot">
      <div class="foot_footleft">
        <div class="foot_footleft_price">
          <div class="_footleft_price">
            <span v-if="formdata.customerTotalCollectionAmount < 0">需退款金额合计:</span>
            <span v-else>需收款金额合计:</span>
            <span style="color: #ff3333"> ￥{{ Math.abs(formdata.customerTotalCollectionAmount) || 0.0 }} </span>
          </div>
        </div>

        <div class="foot_footleft_priceto">
          <div style="width: 180px; margin-right: 10px">给客户赔偿金额</div>
          <el-input v-model.number="formdata.customerCompensationAmount" @input="handleInput" placeholder="请输入数字"></el-input>
          <div style="margin-left: 5px">元</div>
        </div>
      </div>

      <div class="foot_footright">
        <div class="foot_footright_cancle" @click="handleCancel">
          <div class="text">取消</div>
        </div>
        <div class="foot_footright_sure" @click="handleSubmit">
          <div class="text">提交</div>
        </div>
      </div>
    </div>

    <!-- 申请标准 start-->
    <div class="application-dialog">
      <el-dialog v-model="isShowApplicationDialog" width="544px" :show-close="false" @close="handelApplicationCancel">
        <template #header>
          <title-view title="申请标准" isClose @close="handelApplicationCancel" />
        </template>
        <el-form :model="applicationForm" v-if="isShowApplicationDialog" v-loading="isLoadingInfo">
          <el-form-item label="汇报标准">
            <el-input v-model="applicationForm.standardDesc" type="textarea" disabled :autosize="{ minRows: 4 }" />
          </el-form-item>
          <el-form-item label="上传图片">
            <image-video-upload :file-list="applicationPicData" disabled />
          </el-form-item>
          <el-form-item label="上传视频">
            <image-video-upload :file-list="applicationVideoData" disabled fileType="video" />
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <el-dialog v-model="dialogVisible" :before-close="handleClose" align-center width="30%">
      <ImageVideoPreview :showtype="showtype" :url="url"></ImageVideoPreview>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import { rectificationTypeTree, templateType } from "@/apis/rectificationManager";
import { addreform, updatareform, reformDetail, expecteddelaydays } from "@/apis/afterSalesOrder";
import { rectificationStandard } from "@/apis/rectification";
import { ElMessageBox, ElMessage } from "element-plus";
import ImageVideoPreview from "@/components/ImageVideoPreview/index.vue";

const showtitle = ref("");
const router = useRouter();
const route = useRoute();
const formdata = ref({
  reasonIds: "",
  customerTotalCollectionAmount: 0,
  quoteChangeAmount: 0,
  customerCompensationAmount: 0,
  expectedDelayDays: 0
});
const picData = ref([]);
const videoData = ref([]);
const ownerpicData = ref([]);
const ownervideoData = ref([]);
const templateOptions = ref([]);
const rectificationOptions = ref([]);
const treeRectification = ref({
  multiple: false,
  label: "reformTypeName",
  value: "reformTypeId",
  children: "children"
});

const ruleFormRef = ref(null);
const ruleFormReftwo = ref(null);
const rules = {
  rectificationValue: [{ required: true, message: "请选择分类", trigger: "change" }],
  isVisible: [{ required: true, message: "请选择是否业主可见", trigger: "change" }],
  isOwnerConfirmationRequired: [{ required: true, message: "请选择是否需要业主确认", trigger: "blur" }],
  packageId: [{ required: true, message: "请选择模板", trigger: "blur" }],
  isFirstPaymentReceived: [{ required: true, message: "请选择是否首次收款后开展任务和核量", trigger: "blur" }],
  reformDesc: [{ required: true, message: "内容不能为空", trigger: "blur" }]
};
const rulestwo = {
  ownerVisibleContent: [{ required: true, message: "内容不能为空", trigger: "blur" }]
};
//表格状态0是创建，1是修改
const reformState = ref("0");
const isShowApplicationDialog = ref(false);
const isLoadingInfo = ref(false);
const applicationPicData = ref([]);
const applicationVideoData = ref([]);
const initApplicationForm = {
  standardDesc: "",
  picUrls: "",
  picIds: "",
  videoUrls: "",
  videoIds: ""
};
const isNeedsure = ref(false);
const isFirststart = ref(false);
const showisOwner = ref(true);
const applicationForm = ref({ ...initApplicationForm });
const validationMessage = ref("");

const handleInput = value => {
  const match = value.match(/^\d{0,9}(\.\d{0,2})?/);
  const rawValue = match ? match[0] : "";
  const validValue = rawValue.length <= 12 ? rawValue : rawValue.slice(0, 12);
  formdata.value.customerCompensationAmount = validValue;
  getTotal();
};

const getTotal = () => {
  if (formdata.value.customerCompensationAmount == "") {
    formdata.value.customerTotalCollectionAmount = parseFloat(formdata.value.quoteChangeAmount);
    return isNaN(formdata.value.customerTotalCollectionAmount) ? "0.00" : formdata.value.customerTotalCollectionAmount;
  }
  formdata.value.customerTotalCollectionAmount =
      parseFloat(formdata.value.quoteChangeAmount) - parseFloat(formdata.value.customerCompensationAmount);
  return isNaN(formdata.value.customerTotalCollectionAmount) ? "0.00" : formdata.value.customerTotalCollectionAmount;
};

onMounted(() => {
  switch (route.query.afterSalesType) {
    case "1":
      showtitle.value = "整改";
      break;
    case "3":
      showtitle.value = "变更";
      break;
    default:
      showtitle.value = "";
      break;
  }
  executeFunctionsInOrder();
});
// 调用顺序执行功能的函数
const executeFunctionsInOrder = async () => {
  try {
    // 按顺序等待每个函数完成
    await getRectificationTypeTree();
    // 检查条件并执行另一个异步函数
    if (route.query.reformId) {
      reformState.value = "1";
      await getreformDetail();
    }
  } catch (error) {
    console.error("Error executing functions:", error);
  }
};

//获取表单数据
const getreformDetail = async () => {
  const { data } = await reformDetail(route.query.reformId);
  formdata.value = {
    ...data
  };
  resetRideoUpdata(data.reformTypeId);
  formdata.value.rectificationValue = findParentIds(rectificationOptions.value, data.reformTypeId, "reformTypeId");
  videoData.value = parseMediaData(data.videoIds, data.videoUrls);
  picData.value = parseMediaData(data.picIds, data.picUrls);
  if (data.ownerVisibleVideoIds) {
    ownervideoData.value = parseMediaData(data.ownerVisibleVideoIds, data.ownerVisibleVideoUrls);
  }
  if (data.ownerVisiblePicIds) {
    ownerpicData.value = parseMediaData(data.ownerVisiblePicIds, data.ownerVisiblePicUrls);
  }
};
//递归查找父id
const findParentIds = (nodes, targetId, key) => {
  const path = [];
  const search = nodeList => {
    for (const node of nodeList) {
      path.push(node[key]);
      if (node[key] === targetId) {
        return true;
      }
      if (node.children && search(node.children)) {
        return true;
      }
      path.pop();
    }
    return false;
  };
  search(nodes);
  return path;
};
// 函数用于将逗号分隔字符串转换为对象数组
const parseMediaData = (ids, urls) => {
  const idArray = ids ? ids.split(",") : [];
  const urlArray = urls ? urls.split(",") : [];
  if (idArray.length !== urlArray.length) {
    console.warn("ID 和 URL 数量不匹配");
  }
  return idArray.map((id, index) => ({
    fileId: id,
    fileUrl: urlArray[index] || "" // 防止访问 undefined
  }));
};
const isNeedsureclick = () => {
  if (formdata.value.isOwnerConfirmationRequired == 0) {
    formdata.value.isVisible = 1;
  } else {
    formdata.value.isVisible = 1;
  }
};
//选择分类
const handleRectification = e => {
  formdata.value.reformTypeId = e[e.length - 1];
  formdata.value.packageId = "";
  resetRideo(formdata.value.reformTypeId);
};
//重置分类信息
const resetRideo = async e => {
  const { data } = await rectificationStandard(e);
  if (data.taskPackageList.length > 0) {
    templateOptions.value = data.taskPackageList;
  } else {
    gettemplateType();
  }
  // 判断 isConfirm
  isNeedsure.value = Boolean(data.isConfirm);
  formdata.value.isOwnerConfirmationRequired = 1;
  formdata.value.isVisible = 1;
  if (data.isConfirm == true) {
    showisOwner.value = false;
  }
  if (data.isConfirm == false) {
    showisOwner.value = true;
  }
  // 判断 afterPay
  isFirststart.value = Boolean(data.afterPay);
  formdata.value.isFirstPaymentReceived = data.afterPay !== null ? (data.afterPay ? 1 : 0) : "";
};
//重置分类信息
const resetRideoUpdata = async e => {
  const { data } = await rectificationStandard(e);
  if (data.taskPackageList.length > 0) {
    templateOptions.value = data.taskPackageList;
  } else {
    gettemplateType();
  }
  isNeedsure.value = Boolean(data.isConfirm);
  isFirststart.value = Boolean(data.afterPay);
};
const handleSystemCalculation = async () => {
  if (formdata.value.packageId) {
    const { data } = await expecteddelaydays(formdata.value.packageId);
    formdata.value.expectedCompletionTime = data;
  } else {
    ElMessage.error(`请先选择${showtitle.value}模板`);
  }
};
//申请标准
const handleStandard = () => {
  getrectificationStandard(formdata.value.reformTypeId);
};
//获取申请标准
const getrectificationStandard = async value => {
  if (!value) return;
  isShowApplicationDialog.value = true;
  try {
    isLoadingInfo.value = true;
    const { data } = await rectificationStandard(value);
    handelDetailData(data);
    applicationForm.value = data ?? {};
    isLoadingInfo.value = false;
  } catch (err) {
    isLoadingInfo.value = false;
  }
};
const handelDetailData = data => {
  const picUrls = data.picUrls ? data.picUrls.split(",") : [];
  const picIds = data.picIds ? data.picIds.split(",") : [];
  const videoUrls = data.videoUrls ? data.videoUrls.split(",") : [];
  const videoIds = data.videoIds ? data.videoIds.split(",") : [];
  applicationPicData.value = picUrls.map((item, index) => {
    return {
      fileUrl: item,
      fileName: "",
      fileId: picIds[index]
    };
  });
  applicationVideoData.value = videoUrls.map((item, index) => {
    return {
      fileUrl: item,
      fileName: "",
      fileId: videoIds[index]
    };
  });
};
//关闭申请标准
const handelApplicationCancel = () => {
  isShowApplicationDialog.value = false;
  applicationForm.value = { ...initApplicationForm };
  applicationPicData.value = [];
  applicationVideoData.value = [];
};

//取消
const handleCancel = () => {
  ElMessageBox.confirm("关闭后当前录入信息不保存，确认关闭？", "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
      .then(async () => {
        // window.close();
        router.go(-1);
      })
      .catch(err => {
        console.log(err);
      });
};
//提交
const handleSubmit = async () => {
  if (!ruleFormRef.value) return;
  try {
    let restwo = true;
    const res = await ruleFormRef.value.validate();
    if (formdata.value.isVisible == 1) {
      restwo = await ruleFormReftwo.value.validate();
    }
    if (res && restwo) {
      submitSuccess();
    }
  } catch (error) {
    console.log(error);
  }
};
//提交
const submitSuccess = () => {
  if (picData.value) {
    formdata.value.picIds = picData.value.map(item => item.fileId).join(",");
    formdata.value.picUrls = picData.value.map(item => item.fileUrl).join(",");
  }
  if (videoData.value) {
    formdata.value.videoIds = videoData.value.map(item => item.fileId).join(",");
    formdata.value.videoUrls = videoData.value.map(item => item.fileUrl).join(",");
  }

  if (formdata.value.isVisible == 1) {
    if (ownerpicData.value) {
      formdata.value.ownerVisiblePicIds = ownerpicData.value.map(item => item.fileId).join(",");
      formdata.value.ownerVisiblePicUrls = ownerpicData.value.map(item => item.fileUrl).join(",");
    }
    if (ownervideoData.value) {
      formdata.value.ownerVisibleVideoIds = ownervideoData.value.map(item => item.fileId).join(",");
      formdata.value.ownerVisibleVideoUrls = ownervideoData.value.map(item => item.fileUrl).join(",");
    }
  }
  if (formdata.value.isVisible == 0) {
    formdata.value.expectedDelayDays = 0;
    formdata.value.ownerVisibleContent = "";
  }
  if (reformState.value === "0") {
    Object.assign(formdata.value, {
      budgetId: route.query.budgetId,
      contractId: route.query.contractId,
      customerId: route.query.customerId,
      afterSalesType: route.query.afterSalesType,
      exchangeBudgetId: ""
    });
    addformdata(formdata.value);
  } else {
    Object.assign(formdata.value, {
      exchangeBudgetId: ""
    });
    updatareform(route.query.reformId, formdata.value).then(res => {
      ElMessage.success("更新成功");
      router.go(-1);
    });
  }
};

const addformdata = async formdata => {
  const { data } = await addreform(formdata);
  ElMessage.success("新增成功");
  router.go(-1);
};
//分类选项
const getRectificationTypeTree = async () => {
  const isShow = ref(1);
  const { code, data } = await rectificationTypeTree(route.query.afterSalesType, 1);
  code == 200 && (rectificationOptions.value = data);
};
//模板选项
const gettemplateType = async () => {
  const { code, data } = await templateType(route.query.afterSalesType);
  code == 200 && (templateOptions.value = data);
};

//返回
const handleGoto = () => {
  router.go(-1);
};
const subtractexpectedDelayDays = () => {
  if (formdata.value.expectedDelayDays !== 0) {
    formdata.value.expectedDelayDays--;
  } else {
    ElMessage.error("超过最小限制值");
  }
};
const addexpectedDelayDays = () => {
  if (formdata.value.expectedDelayDays < 99999) {
    formdata.value.expectedDelayDays++;
  } else {
    ElMessage.error("超过最大限制值");
  }
};
const setDefaultDelayDays = () => {
  if (formdata.value.expectedDelayDays === "" || formdata.value.expectedDelayDays === null) {
    formdata.value.expectedDelayDays = 0;
  }
};
const disableEnterKey = event => {
  if (event.key === "Enter") {
    event.preventDefault();
  }
};
const validateInput = value => {
  let sanitizedValue = value.replace(/\D/g, "");
  if (sanitizedValue.length > 5) {
    sanitizedValue = sanitizedValue.substring(0, 5);
    validationMessage.value = "只能输入最多五位数字";
  } else {
    validationMessage.value = "";
  }
  if (sanitizedValue.length > 1 && sanitizedValue[0] === "0") {
    sanitizedValue = sanitizedValue.slice(1);
    validationMessage.value = "请输入有效的正整数";
  }
  formdata.value.expectedDelayDays = sanitizedValue;
};
const disabledDate = date => {
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 清除时间部分（只是比较日期）
  return date.getTime() < today.getTime(); // 返回true时禁用该日期
};
//图片上传
const uploadImage = data => {
  picData.value.push({
    ...data
  });
};
//图片删除
const uploadImageRemove = index => {
  picData.value.splice(index, 1);
};
//视频上传
const uploadVideo = data => {
  videoData.value.push({
    ...data
  });
};
//视频删除
const uploadVideoRemove = index => {
  videoData.value.splice(index, 1);
};

//图片上传
const owneruploadImage = data => {
  ownerpicData.value.push({
    ...data
  });
};
//图片删除
const owneruploadImageRemove = index => {
  ownerpicData.value.splice(index, 1);
};
//视频上传
const owneruploadVideo = data => {
  ownervideoData.value.push({
    ...data
  });
};
//视频删除
const owneruploadVideoRemove = index => {
  ownervideoData.value.splice(index, 1);
};
</script>

<style scoped lang="scss">
@use "index";
</style>
<style>
.form-item-container .el-input__count {
  background: none;
}
.item_video_active .upload-picture-card {
  width: 180px;
  height: 100px;
  background: #f2f3f5;
  border-radius: 0px 0px 0px 0px;
}

.item_video_active .upload__tip_foot {
  height: 22px;
  font-family:
      PingFang SC,
      PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #86909c;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-top: 20px;
}

.item_image_active .el-form-item__label {
  margin-top: -85px !important;
}

.item_video_active .el-form-item__label {
  margin-top: -125px !important;
}

.item-container-elinput .el-input__wrapper {
  width: 278px;
  height: 32px;
  border-radius: 0px 0px 0px 0px;
  background: #f2f3f5 !important;
}
</style>
